<template>
  <div class="project_interview_container">
    <div class="projectDetailWrapper">
        <div class="projectDetailContent">
          <div class="topBox">
            <div
              class="img"
              :style="{ backgroundImage: `url(${projectData?.coverImg})` }"
            ></div>
            <div class="info">
              <div class="title">
                {{ projectData.name || '' }}
              </div>
              <div class="describe" v-html="projectData.describe || ''"></div>
              <div
                class="customBtn"
                @click="handleClick({ name: '项目链接' })"
                v-if="projectData.template == 0 && projectData.resultLink"
              >
                <img src="@/assets/link.png" alt="" />
                {{ t('projectDetail','项目成果链接') }}
              </div>
            </div>
          </div>
          <div class="content">
            <div
              class="subTitle"
              v-if="
                projectData.template == 0 &&
                projectData.newProjectResultFileList &&
                projectData.newProjectResultFileList.length
              "
            >
              <img src="@/assets/titleIcon.png" alt="" />
              {{ t('projectDetail','项目成果展示') }}
            </div>
            <div
              class="item"
              v-if="
                projectData.template == 0 &&
                projectData.newProjectResultFileList &&
                projectData.newProjectResultFileList.length
              "
            >
              <div class="value">
                <a-carousel arrows>
                  <template #prevArrow>
                    <div
                      class="custom-slick-arrow"
                      style="
                        left: 10px;
                        z-index: 1;
                        font-size: 30px;
                        color: #d2ccdd;
                      "
                    >
                      <LeftCircleOutlined />
                    </div>
                  </template>
                  <template #nextArrow>
                    <div
                      class="custom-slick-arrow"
                      style="right: 20px; font-size: 30px; color: #d2ccdd"
                    >
                      <RightCircleOutlined />
                    </div>
                  </template>
                  <div
                    class="imagesBox"
                    v-for="(
                      item, index
                    ) in projectData.newProjectResultFileList"
                  >
                    <div class="img">
                      <img
                        :src="item[0]?.fileUrl"
                        @click.stop="
                          ;(visible = true), (current = index * 2 + 0)
                        "
                      />
                    </div>
                    <div class="img">
                      <img
                        :src="item[1]?.fileUrl"
                        @click.stop="
                          ;(visible = true), (current = index * 2 + 1)
                        "
                      />
                    </div>
                  </div>
                </a-carousel>
              </div>
            </div>

            <div class="subTitle">
              <img src="@/assets/titleIcon.png" alt="" />
              {{ t('projectDetail','项目岗位') }}
            </div>
            <div class="projectJobBox">
              <div
                class="item"
                v-for="(item,i) in projectData.projectJobCardVOList"
              >
                <div class="name">{{ item.name }}</div>
                <div class="skill">{{ t('projectDetail','技能要求') }}:{{ item.skill }}</div>
                <div
                  style="display: flex; align-items: center;flex-wrap:wrap; margin-top: 9px"
                >
                  <div class="requiredNum" style="margin-right: 10px;margin-bottom:5px"
                    >{{ t('projectPositions','共招') }}:{{ item.requiredNum || '' }}{{ t('projectPositions','人') }}</div
                  >
                  <div style="margin-bottom:5px"
                    :class="{ notfilled: item.isFull === 0 }"
                    class="toBeRecruitedNum"
                    >{{ t('projectPositions','待招') }}:<span>{{ item.vacancyNum }}</span
                    >{{ t('projectPositions','人') }}</div
                  >
                </div>

                <a-button
                  style="margin-top: 10px"
                  :disabled="isCheckedJob == 'false'"
                  v-if="
                    projectData.template != 1 &&
                    projectData.registrationStatus == 1 &&
                    projectData.recruitStatus != 1 &&
                    !isTeacher()
                  "
                  type="primary"
                  @click="toApply(item, i)"
                  >{{ t('projectDetail',"应聘") }}
                </a-button>
              </div>
            </div>
            <div class="subTitle">
              <img src="@/assets/titleIcon.png" alt="" />
              {{ t('projectDetail',"主指导老师") }}
            </div>
            <div class="teacherBox">
              <div class="teacherItem">
                <img src="@/assets/user.png" alt="头像" />
                <div>
                  <div>{{ projectData?.mainTeacher?.name }}</div>
                  <div
                    style="
                      margin-top: 4px;
                      font-weight: 400;
                      font-size: 12px;
                      color: #333333;
                    "
                    >{{ t('projectDetail','专业') }}：{{
                      projectData?.mainTeacher?.orientation || t('common','暂无数据')
                    }}</div
                  >
                </div>
              </div>
            </div>

            <div class="subTitle" v-if="projectData?.coTeacherList?.length">
              <img src="@/assets/titleIcon.png" alt="" />
              {{ t('projectDetail','副指导老师') }}
            </div>
            <div class="teacherBox">
              <div
                class="teacherItem"
                v-for="item in projectData?.coTeacherList"
                :key="item.id"
              >
                <img src="@/assets/user.png" alt="头像" />
                <div>
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      margin-top: 4px;
                      font-weight: 400;
                      font-size: 12px;
                      color: #333333;
                    "
                    >{{ t('projectDetail','专业') }}：{{ item.orientation || t('common','暂无数据') }}</div
                  >
                </div>
              </div>
            </div>

            <div class="subTitle">
              <img src="@/assets/titleIcon.png" alt="" />
              {{ t('projectDetail','详细信息') }}
            </div>
            <div class="group">
              <div class="item">
                <div class="cell">
                  <div class="label">{{ t('projectDetail','所属年级') }}</div>
                  <div class="value">{{ projectData.grade || t('common','暂无数据') }}</div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','所属班级') }}</div>
                  <div class="value">{{
                    formatClass(projectData.gradeClassList) || t('common','暂无数据')
                  }}</div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','项目难度') }}</div>
                  <div class="value">
                    <a-rate
                      :value="projectData.difficulty"
                      disabled
                      style="font-size: 14px"
                  /></div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','项目类型') }}</div>
                  <div class="value">{{ projectData.categoryName || t('common','暂无数据') }}</div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','项目模板') }}</div>
                  <div class="value">{{
                    projectData.template == 1 ? t('projectDetail','多组协作') : t('projectDetail','经典')
                  }}</div>
                </div>
              </div>
              <div class="item">
                <div class="cell" v-if="projectData.template == 1">
                  <div class="label">{{ t('projectDetail','小组人数设置') }} | {{ t('projectDetail','成员总数') }}</div>
                  <div class="value"
                    >{{ projectData.groupMemberLimit }} |
                    {{ projectData.totalMemberLimit }}</div
                  >
                </div>
                <div class="cell" v-else>
                  <div class="label">{{ t('projectDetail','成员总数') }}</div>
                  <div class="value">{{ projectData.totalMemberLimit || t('common','暂无数据') }}</div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','开发模型') }}</div>
                  <div class="value">{{ projectData.devModelName || t('common','暂无数据') }}</div>
                </div>
                <div class="cell">
                  <div class="label">{{ t('projectDetail','课程') }}</div>
                  <div class="value">{{
                    formatCourse(projectData.courseList) || t('common','暂无数据')
                  }}</div>
                </div>

                <div class="cell">
                  <div class="label">{{ t('projectDetail','项目周期') }}</div>
                  <div class="value"
                    >{{ formatDate(projectData.startTime) }}~{{
                      formatDate(projectData.endTime)
                    }}</div
                  >
                  <!-- <div class="value">{{projectData.startTime || ''}} 至 {{projectData.endTime || ''}}</div> -->
                </div>
                <!-- <div class="cell">
                <div class="label">报名时间</div>
                <div class="value">{{projectData.registrationStartTime || ''}} 至 {{projectData.registrationEndTime || ''}}</div>
              </div> -->
                <div class="cell">
                  <div class="label">{{ t('projectDetail','报名状态') }}</div>
                  <div class="value">{{
                    signUpStatusLabel[projectData.registrationStatus] || t('common','暂无数据')
                  }}</div>
                </div>
              </div>
              <div class="item">
                <div class="cell">
                  <div class="label">{{ t('projectDetail','评分标准') }}</div>
                  <div
                    class="value"
                    v-html="projectData.scoreStandard || t('common','暂无数据')"
                  ></div>
                </div>
              </div>
              <div class="item">
                <div class="cell">
                  <div class="label">{{ t('projectDetail','项目目标') }}</div>
                  <div class="value"
                    ><div v-html="projectData.target || t('common','暂无数据')"></div
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="buttonGroup" v-if="projectData.registrationStatus == 1">
          <div
            style="margin: 20px 20px 20px 0 ;"
        
              class="button"
          @click="quitProject"
              >{{ t('projectDetail','退出项目') }}</div
            >
        </div>
      </div>
    <a-image-preview-group
      v-if="visible"
      :preview="{ visible, onVisibleChange: () => (visible = false), current }"
    >
      <a-image
        v-for="item in projectData.projectResultFileList"
        :width="200"
        :style="{ display: 'none' }"
        :src="item.fileUrl"
      />
    </a-image-preview-group>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import AIConsulting from '@/components/AIConsulting.vue'
import { useRoute, useRouter } from 'vue-router'
import { getProjectMessage } from '@/request/projectSquare.js'
import { quitMyProject, getJobId } from '@/request/projectManagement.js'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { message } from 'ant-design-vue'
import MarkdownIt from 'markdown-it'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
import { t } from '@/i18n'
import { isTeacher } from "@/stores/info"


const formatCourse = (courseList) => {
  if (!courseList) return ''
  return courseList.map((item) => item.courseName).join('，')
}
const formatClass = (gradeClassList) => {
  if (!gradeClassList) return ''
  return gradeClassList.map((item) => item.gradeClassName).join('，')
}

const visible = ref(false)
const current = ref(0)
const router = useRouter()
//markdown渲染
function markdownIt() {
  const md = new MarkdownIt()

  if (projectData.describe && projectData.describe.includes('###')) {
    projectData.describe = md.render(projectData.describe)
  }
  if (projectData.scoreStandard && projectData.scoreStandard.includes('###')) {
    projectData.scoreStandard = md.render(projectData.scoreStandard)
  }
  if (projectData.target && projectData.target.includes('###')) {
    projectData.target = md.render(projectData.target)
  }
}

//退出项目
function quitProject() {
  Modal.confirm({
    title: t('projectDetail','你确定要退出该项目吗？'),
    icon: createVNode(ExclamationCircleOutlined),
    async onOk() {
      let jobData = await getJobId(route.query.id)
      if (!jobData || !jobData.data || !jobData.data.id) {
        message.error(t('projectDetail','在本项目下没有查询到您的信息'))
        return
      }
      let res = await quitMyProject({
        projectJobId: jobData.data.id,
      })
      console.log('jobData', jobData)
      if (res && res.code == 200) {
        message.success(t('projectDetail','退出项目成功'))
        router.replace({
          name: 'PersonalCenter',
        })
      } else {
        message.error(t('projectDetail','退出项目失败'))
      }
      Modal.destroyAll()
    },
    onCancel() {},
  })
}

let open = ref(true)
onMounted(async () => {
  const id = route.query.id
  let res = await getProjectMessage(id)
  for (let key in res.data) {
    if (typeof res.data[key] == 'string') {
      projectData[key] = `${res.data[key]}`.trim() || t('common','暂无')
    } else {
      projectData[key] = res.data[key]
    }
  }
  projectData['newProjectResultFileList'] =
    res?.data?.projectResultFileList?.reduce((acc, curr, index) => {
      if (index % 2 === 0) {
        // 每两个元素创建一个新数组
        acc.push([curr, res?.data?.projectResultFileList[index + 1]])
      }
      return acc
    }, [])
  markdownIt()
  console.log('项目管理', res)
})

const route = useRoute()
let projectData = reactive({})

//项目日期处理
function formatDate(dateString) {
  // 将输入的字符串转换为 Date 对象
  const date = new Date(dateString)

  // 获取年份、月份和日期
  const year = date.getFullYear()
  const month = date.getMonth() + 1 // 月份从0开始，需要加1
  const day = date.getDate()

  // 返回格式化后的字符串
  return `${year || ''}/${month || ''}/${day || ''}`
}

let signUpStatusLabel = [t('control','未开始'), t('control','招募中'), t('control','已截止')]
</script>

<style lang="scss" scoped>
.project_interview_container {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  min-height: 0;
	min-width: 0;
}
.projectDetailWrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
}
.projectDetailContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  /* padding: 20px; */
  color: #333;
  background: #ffffff;
  border-radius: 10px;
  overflow-y: auto;
  .topBox {
    padding: 20px 20px 0 20px;
    display: flex;
    width: 100%;
    min-height: 208px;
    .img {
      width: 360px;
      max-height: 210px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f5f5f5;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 24px;
    }
    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
      height: 210px;

      .title {
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
          padding: 7px 13px;
          background: #f1bf46;
          border-radius: 13px;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          margin-left: 12px;
        }
      }

      .describe {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 1.5;
        word-break: break-all;
        overflow: auto;
        width: 100%;
      }
      .customBtn {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 5px 8px;
        font-weight: 400;
        font-size: 14px;
        color: #6d68ee;
        background: #eeeeff;
        border-radius: 4px;
        img {
          margin-right: 6px;
          height: 10px;
        }
      }
    }
  }
  .imagesBox {
    width: 100%;
    height: 200px;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    .img {
      width: 50%;
      /* border: 1px solid #d7d2e2; */
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        cursor: pointer;
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
  .content {
    height: auto;
    min-height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    .subTitle {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      img {
        width: 14px;
        margin-right: 8px;
      }
    }
    .projectJobBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .item {
        width: 200px;
        padding: 12px 15px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;

        .name {
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }
        .skill {
          margin-top: 9px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .toBeRecruitedNum {
          font-weight: 500;
          font-size: 12px;
          color: #8466f5;
        }
        .requiredNum {
          font-weight: 400;
          font-size: 12px;
          color: #b5acce;
        }
      }
    }
    .teacherBox {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .teacherItem {
        width: 200px;
        background: #ffffff;
        box-shadow: 0px 2px 7px 0px #e3e2ff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        padding: 12px;
        img {
          width: 45px;
          margin-right: 10px;
        }
      }
    }
    .group {
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        width: 100%;
        padding: 17px 27px;
        margin-bottom: 16px;
        background: #f7f7ff;
        border-radius: 8px;
        .cell {
          display: flex;
          flex-direction: column;
          min-width: 20%;
          padding: 0 5px;
          .label {
            font-weight: 500;
            font-size: 14px;
            color: rgba(119, 106, 156, 0.85);
          }
          .value {
            font-weight: 500;
            margin-top: 6px;
            font-weight: 500;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 1.5;
          }
        }
      }
    }
  }
}
.buttonGroup {
    min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .button {
    text-wrap: nowrap;
    padding: 8px 12px;
    background: #8466f5;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: white;
      color: #8466f5;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #ecf3fe;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}
:deep(.slick-slide h3) {
  color: #fff;
}
</style>
